<!--
 * @Author: your name
 * @Date: 2021-08-24 18:57:57
 * @LastEditTime: 2021-08-25 20:23:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_study\src\views\profile\AddressEdit.vue
-->
<template>
  <div class="address-edit-box">
    <nav-bar class="nav-bar">
      <template v-slot:center> {{title}} </template>
    </nav-bar>

    <van-address-edit
      class="edit"
      :area-list="areaList"
      :address-info="addressInfo"
      :show-delete="type=='edit'"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>
<script>
import NavBar from "components/common/navbar/NavBar";
import { ref, reactive, onMounted, toRefs, computed } from "vue";
import { useRouter,useRoute } from "vue-router";
import { addAddress,editAddress,deleteAddress,getAddressDetail } from "network/address";
import tdist from 'utils/address'
import { Toast } from "vant";
import { useStore } from "vuex";

export default {
  components: { NavBar },
  name: "Address",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const state = reactive({
        areaList:{
            province_list:{},
            city_list:{},
            county_list:{}
        },
      searchResult: [],
      addressInfo: [],
      type:'add',
      addressId:'',
      title:''
    });

    onMounted(() => {
        //构造省市区列表
        let _province_list={}
        let _city_list={}
        let _county_list={}

        // console.log(tdist.data);
        for (let i = 0; i < tdist.data.length; i++) {
            // console.log(tdist.data[i].label+tdist.data[i].value);
            _province_list[tdist.data[i].label]=tdist.data[i].value
            for (let j = 0; j < tdist.data[i].children.length; j++) {
                // console.log(tdist.data[i].children[j].value);
                _city_list[tdist.data[i].children[j].label]=tdist.data[i].children[j].value
                for (let k = 0; k < tdist.data[i].children[j].children.length; k++) {
                    _county_list[tdist.data[i].children[j].children[k].label]=tdist.data[i].children[j].children[k].value
                    
                }
            }

        }

        // console.log(_province_list);
        // console.log(_city_list);
        // console.log(_county_list);
        state.areaList.province_list= _province_list
        state.areaList.city_list= _city_list
        state.areaList.county_list= _county_list

        //接受参数
        const {type,addressId}=route.query

        state.type=type
        state.addressId=addressId
        // console.log(route.query);
        // console.log(state);

        if(type=='edit'){
            getAddressDetail(addressId).then(res=>{
                // console.log(res);
                const addressDetail=res

                state.addressInfo={
                    name:addressDetail.name,
                    tel:addressDetail.phone,
                    province:addressDetail.province,
                    city:addressDetail.city,
                    county:addressDetail.county,
                    addressDetail:addressDetail.address,
                    isDefault:!!addressDetail.is_default
                }
            })
        }

    });

    const title=computed(()=>{
        return state.type=='add'?'新增地址':'编辑地址'
    })

    const onSave = (context) => {
        const params={
            name:context.name,
            phone:context.tel,
            province:context.province,
            city:context.city,
            county:context.county,
            address:context.addressDetail,
            is_default:context.isDefault ? 1 : 0
        }
        // console.log(params);

        if(state.type=='edit'){
            //修改数据
            editAddress(state.addressId,params)
        }else if(state.type=='add'){
            addAddress(params)
        }

        //调用接口添加数据
        // addAddress(params)

        Toast('保存成功')
            setTimeout(() => {
                router.back()
            }, 1000);
    };

    const onDelete = (item) => {
        deleteAddress(state.addressId).then(res=>{
            Toast('删除成功')
            setTimeout(() => {
                router.back()
            }, 1000);
        })
    };

    const select = (item) => {
      router.push({
        path: "/createorder",
        query: { addressId: item.id },
      });
    };

    return {
      ...toRefs(state),
      onSave,
      onDelete,
      title,
    };
  },
};
</script>
<style lang="scss">
    .edit{
        .van-field_body{
            textarea{
                height: 26px !important;
            }
        }
    }
    .address-edit-box{
        margin-top: 44px;
        .van-button{
                background: var(--color-tint);
                border-color: var(--color-tint);
            }
    }
</style>